<template>
  <div class="container">
      <div class="wrap">
          <div class="box" v-for="(item,index) in brandList">
            <h3>{{item.letter}}</h3>
            <ul>
              <li v-for="ii in item.data">
                <img :src="'http://121.40.78.200/pic/carLogo/'+ii.icon">
                {{ii.chnName}}
              </li>
            </ul>
          </div>
      </div>
  </div>
</template>

<script>
import { InfiniteScroll,Spinner } from 'mint-ui';
import { mapGetters } from 'vuex'

import getPy from '../assets/js/sortByPy';
  // Vue.use(InfiniteScroll);
export default {
  
  name: 'selectCar',
  // 数据
  data () {
    return {
      brandList: [] // 品牌列表
    }
  },
    computed:{
    ...mapGetters([
      'getIp',//双胜IP
      'getJumpIp',
      'getIsLocation',//取store中是否已经手动选择城市
      'getCityName',//取store中的城市名
      'getLgnLat',// 取坐标
      'getCarId',//取默认车辆id
      'getDefaultCatAllInfo',//取默认车辆所有信息
      'getPartsOfChoose',//store中的已选车身部位
      'getPartsOfChooseW'//store中的已选车轮部位
    ]),
  },
  // 创建
  created () {
    // console.log(getPy('jssp'))
    // console.log(this.$store.state.ip+"/CARNT/CarBaseAction/carBrandList.action")
      this.$http.get(this.$store.state.ip+"/CARNT/CarBaseAction/carBrandList.action")
      .then(res => {
        // console.log(res.body)
        let resList = []
        let letters ="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
        for (let m = 0; m < letters.length; m++){
          let temp = {letter:letters[m], data: []}
          // console.log(temp)
           for (let i = 0; i < res.body.length; i++){
            let py = getPy(res.body[i].chnName)[0].substr(0,1)
            if (py == letters[m]) {
              temp.data.push(res.body[i])
            }
          }
          if (temp.data.length) {
            resList.push(temp)
          }
        }
        console.log(resList)
        this.brandList = resList
      }).catch(err => {
        console.log(err)
      })


    
  },
  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
  },
  // 子组件
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .container {
    background: #ffffff;
    height: 100%;
    .wrap{

      .box{
        h3{
            background-color: #EFEFEF;
            margin: 0px;
            padding: 5px 10px;
            font-size: 26px;
        }
        ul{
          li {
            height:.7rem;
            line-height: .7rem;
            font-size: .40rem;
            border-bottom: 1px solid #EFEFEF;
            img {
              margin: 0 0.2rem;
              width: .5rem;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
</style>
